<template>
    <div class="leftNavigationBar">
        <div @click="navigationBarEvent(index)" :class="item.isTrue?'selected':'curserPoint'" v-for="(item,index) in list" :key="index" class="navigationBar">
            <i class="el-icon-platform-eleme"></i>
            <span>{{item.title}}</span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            list:[
                {
                    id:0,
                    title:"拍卖平台",
                    isTrue:true
                },
                {
                    id:1,
                    title:"下载中心",
                    isTrue:false
                }
            ]
        }
    },
    methods:{
        navigationBarEvent:function (index) {
            let { list } = this
            list.forEach((v,i) => {
                v.isTrue = false
            })
            list[index].isTrue = true
            this.$emit('navigationBarSelect',index)
        }
    }
}
</script>

<style lang="less" scoped>
.selected{
    background: rgb(88, 88, 88);
}

.curserPoint{
    cursor: pointer;
}

.leftNavigationBar{
    width: 200px;
    height:100%;
    background: #333333;
    .navigationBar{
        width: calc(100% - 20px);
        height: 60px;
        display: flex;
        // justify-content: center;
        padding-left: 20px;
        align-items: center;
        color: #FFFFFF;
        span{
            position: relative;
            left: 10px;
        }
    }
}
</style>